<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">{{Lang.lang('我的團隊')}}</view>
			<view class="rule" data-url="/pages/index/ruleV?type=team" @click="gotopage">{{Lang.lang('規則')}}</view>
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="my_box">
				<view class="avatar">
					<image src="../../static/tx01.png" mode="scaleToFill"></image>
				</view>
				<view class="text_box">
					<!-- <view class="name">DAPP001</view> -->
					<view class="num">{{Lang.lang('團隊人數')}}: {{team_num}} 人</view>
				</view>
				<view class="vip_box">
					<view class="icon iconfont icon-f-vip"></view>
					<view class="vip">V {{user_info.agent_lv}}</view>
				</view>
			</view>

			<view class="assets_box">

				<view class="menu_box">
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu16.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('直推獎勵')}}(YYDM)</view>
						<view class="text">{{user_wallet.fy_zt_yydm}}</view>
					</view>
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu15.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('網體獎勵')}}(YYDM)</view>
						<view class="text">{{user_wallet.fy_wt_yydm}}</view>
					</view>
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu17.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('團隊獎勵')}}(YYDM)</view>
						<view class="text">{{user_wallet.fy_td_yydm}}</view>
					</view>
				</view>

				<view class="menu_box">
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu16.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('直推獎勵')}}(YYDZ)</view>
						<view class="text">{{user_wallet.fy_zt_yydz}}</view>
					</view>
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu15.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('網體獎勵')}}(YYDZ)</view>
						<view class="text">{{user_wallet.fy_wt_yydz}}</view>
					</view>
					<view class="menu">
						<view class="icon">
							<image src="../../static/menu/menu17.png" mode="widthFix"></image>
						</view>
						<view class="name">{{Lang.lang('團隊獎勵')}}(YYDZ)</view>
						<view class="text">{{user_wallet.fy_td_yydz}}</view>
					</view>
				</view>

			</view>

			<view class="page_title">
				<view class="title">{{Lang.lang('獎勵列表')}}</view>
				<view class="nav">
					<view class="menu" :class="select == 0 ? 'menucolor' : ''" data-index="0" @tap="setNavMenu">{{Lang.lang('直推')}}
					</view>
					<view class="menu" :class="select == 1 ? 'menucolor' : ''" data-index="1" @tap="setNavMenu">{{Lang.lang('網體')}}
					</view>
					<view class="menu" :class="select == 2 ? 'menucolor' : ''" data-index="2" @tap="setNavMenu">{{Lang.lang('團隊')}}
					</view>
				</view>
			</view>

			<view class="nav02">
				<block v-for="(item, index) in menu01">
					<view class="menu" :class="select02 == index ? 'menucolor02' : ''" :data-index="index"
						@tap="setNavMenu02">{{item.type}}</view>
				</block>
			</view>



			<block v-for="(item, index) in list" :key="index">
				<view class="list_box">
					<view class="zuob">
						<view class="img">
							<image src="../../static/tx01.png" mode="widthFix"></image>
						</view>
						<view>
							<view class="name">{{item.address}}</view>
							<view class="figure">{{item.num}}</view>
							<!-- <view class="time">2022-12-22 13:32:19</view> -->
						</view>
					</view>
					<view class="youb">
						<!-- <view class="figure">{{item.num}}</view> -->
						<!-- <view class="unit">分紅業績</view> -->
					</view>
				</view>
			</block>

		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',
				select: 0,
				select02: 0,
				menu01: [{
						type: 'YYDM'
					},
					{
						type: 'YYDZ'
					}
				],
				team_num: 0,
				user_info: {},
				user_wallet: {},
				list: []

			}
		},
		onLoad() {
			let that = this;
			that.loadData();
		},
		onShow() {

		},
		methods: {
			setNavMenu02(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select02 = index;
				that.loadData()

			},
			setNavMenu(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.select = index;
				that.loadData()
			},
			loadData() {
				let that = this;

				let p_type = 0;
				if (that.select == 0 && that.select02 == 0) {
					p_type = 1;
				} else if (that.select == 0 && that.select02 == 1) {
					p_type = 4;
				} else if (that.select == 1 && that.select02 == 0) {
					p_type = 2;
				} else if (that.select == 1 && that.select02 == 1) {
					p_type = 5;
				} else if (that.select == 2 && that.select02 == 0) {
					p_type = 3;
				} else if (that.select == 2 && that.select02 == 1) {
					p_type = 6;
				}



				that.Net._post('api/index/teamIndex', {
					p_type: p_type
				}, res => {
					if (res.code == 200) {
						that.team_num = res.data.team_num
						that.user_info = res.data.user_info
						that.user_wallet = res.data.user_wallet
						that.list = res.data.list
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.my_box {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.my_box .avatar {
		width: 17vw;
		height: 17vw;
		border-radius: 50%;
		margin-right: 2vw;
	}

	.my_box .avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.my_box .copy {
		font-size: 4.5vw;
		color: #fff;
	}

	.my_box .text_box {
		flex: 1;
	}

	.my_box .text_box .name {
		font-size: 5.5vw;
		color: #fff;
		font-weight: bold;
	}

	.my_box .text_box .num {
		font-size: 3.2vw;
		color: #BDBDBD;
		margin-top: 0.8vw;
	}

	.my_box .vip_box {
		width: 24vw;
		height: 12vw;
		border-radius: 5vw;
		border: 1px solid #464646;
		background-color: #292929;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.my_box .vip_box .icon {
		font-size: 5vw;
		color: #fff;
		margin-right: 3vw;
	}

	.my_box .vip_box .vip {
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
	}

	.assets_box {
		width: 100%;
		margin-top: 6vw;
	}

	.assets_box .title_box {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #EEC67F;
		height: 13.5vw;
		border-radius: 3vw 3vw 0 0;
		padding: 0 4vw;
	}

	.assets_box .title_box .title {
		font-size: 4.5vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}

	.assets_box .title_box .icon {
		width: 24vw;
		margin-top: 3vw;
	}

	.assets_box .title_box .icon image {
		width: 100%;
		display: block;
	}

	.menu_box {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 5vw 0;
		background-color: #1A1A1A;
		border-radius: 4vw;
		margin-top: 4%;
	}

	.menu_box .menu {
		flex: 1;
	}

	.menu_box .menu .icon {
		width: 10vw;
		margin: 0 auto;
	}

	.menu_box .menu .name {
		font-size: 3.2vw;
		color: #666666;
		text-align: center;
		margin-top: 2vw;
	}


	.menu_box .menu .text {
		font-size: 5vw;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin-top: 2vw;
	}

	.page_title {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.page_title .title {
		font-size: 4.5vw;
		color: #fff;
		font-weight: bold;
	}

	.page_title .nav {
		flex: 1;
		height: 12vw;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 30vw;
	}

	.page_title .nav .menu {
		height: 100%;
		line-height: 12vw;
		font-size: 4.5vw;
		color: #666666;
		font-weight: bold;
	}

	.menucolor {
		color: #fff !important;
		border-bottom: 2px solid #0155FF !important;
	}

	.nav02 {
		flex: 1;
		display: flex;
		align-items: center;
		margin-top: 4%;
	}

	.nav02 .menu {
		flex: 1;
		height: 13vw;
		background-color: #333333;
		border-radius: 4vw;
		font-size: 3.5vw;
		color: #ABABAB;
		margin-left: 3vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav02 .menu:nth-child(1) {
		margin-left: 0;
	}

	.menucolor02 {
		background-color: #0155FF !important;
		color: #fff !important;
	}

	.list_box {
		background-color: #1A1A1A;
		width: 100%;
		padding: 4vw 3vw;
		margin: 4% auto 0vw;
		border-radius: 4vw;
		display: flex;
		justify-content: space-between;
	}

	.list_box .zuob {
		display: flex;
	}

	.list_box .img {
		width: 11vw;
		margin-right: 2vw;
	}

	.list_box .img image {
		width: 100%;
	}

	.list_box .name {
		color: #fff;
		font-size: 4vw;
		font-weight: bold;
	}

	.list_box .time {
		color: #919191;
		font-size: 3vw;
		margin-top: 1vw;
	}

	.list_box .youb {
		text-align: right;
	}

	.figure {
		color: #F95657;
		font-size: 5vw;
		font-weight: bold;
	}

	.unit {
		color: #919191;
		font-size: 3vw;
	}
</style>